<%-- Created by IntelliJ IDEA. User: Administrator Date: 2022/12/14 Time: 19:24
To change this template use File | Settings | File Templates. --%> <%@ page
contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>客户开发计划</title>
    <!-- 引入引入共同的页面样式 -->
    <jsp:include page="../common/css_js.jsp" />
    <jsp:include page="../common/table.jsp"/>
  </head>
  <body>
    <div class="container col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">
            <b style="font-size: 22px">开发计划列表--所有开发计划信息</b><br />
            <h6>制定客户开发计划和记录开发进度</h6>
          </div>
        </header>
        <div class="card-body">
          <!-- 条件查询表单 -->
          <form
            class="form-inline"
            name="form1"
            action="#"
            method="post"
            id="toolbar"
          >
            <!-- 操作 -->
            <a class="btn btn-primary" href="#" onclick="query()"
              ><span class="mdi mdi-table-large"></span>显示所有</a
            >
            &nbsp;&nbsp;&nbsp;
            <b>客户名称：</b
            ><label
              ><input
                name="customerName"
                class="form-control"
                placeholder="请输入客户名称"
            /></label>
            &nbsp;&nbsp;
            <b>开发状态：</b>
            <label>
              <select name="devResult" class="form-control">
                <option value="">请选择</option>
                <option value="1">开发成功</option>
                <option value="2">开发中</option>
                <option value="3">未开发</option>
                <option value="4">开发失败</option>
              </select>
            </label>
            &nbsp;&nbsp;
            <button type="button" class="btn btn-primary" onclick="like()">
              <span class="mdi mdi-table-search"></span>搜索
            </button>
          </form>
          <!-- 数据显示 -->
          <div class="table-responsive">
            <table id="table"></table>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div
      class="modal fade bd-example"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">营销机会指派</h4>
            <div class="col-md-2 column"></div>
            <div class="col-md-4 column" id="close"></div>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <a aria-hidden="true">&times;</a>
            </button>
          </div>
          <div class="modal-body" style="background-color: #f8faf7">
            <!-- 增加修改表单 -->
            <div class="table-responsive">
              <form>
                <table class="table table-bordered table-hover" id="tab333">
                  <input type="hidden" name="id" />
                  <input type="hidden" name="createMan" />
                  <input type="hidden" name="state" id="state" />
                  <input type="hidden" name="devResult" />
                  <input type="hidden" name="assignTime" />
                  <input type="hidden" name="customerName" />
                  <input type="hidden" name="chanceSource" />
                  <input type="hidden" name="linkageMan" />
                  <input type="hidden" name="linkagePhone" />
                  <input type="hidden" name="overview" />
                  <input type="hidden" name="cgjl" />
                  <input type="hidden" name="description" />
                  <input type="hidden" name="isValid" />
                  <input type="hidden" name="updateDate" />
                  <tr>
                    <td>指派给：</td>
                    <td>
                      <label
                        ><select class="form-control" name="assignMan"></select
                      ></label>
                    </td>
                  </tr>
                </table>
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button
              type="button"
              id="btn111"
              class="btn btn-primary"
              onclick="insert_update()"
            >
              指派
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    // 加载事件
    $(function () {
      // 初始化表格
      $("#table").bootstrapTable({
        classes: "table table-bordered table-hover table-striped text-nowrap", // 表格样式
        url: "${ctx}/sale-chance/list?assignMan=${sessionScope.session_user.username}", // 请求后台的URL
        method: "GET", // 请求方式
        toolbar: "#toolbar", // 工具按钮容器
        pagination: true, //是否显示分页条
        pageNumber: 1, // 首页页码，默认为1
        pageSize: 5, //一页显示的行数
        paginationLoop: false, //是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
        pageList: [5, 10, 20], //选择每页显示多少行，数据过少时可能会没有效果
        clickToSelect: true, // 是否启用点击选中行
        undefinedText: "-", // 当字段为 undefined 显示
        sortOrder: "asc", // 排序方式
        showColumns: true, // 是否显示所有的列
        showRefresh: true, // 是否显示刷新按钮
        showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
        showExport: true, // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
        exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
        // 响应处理
        responseHandler: function (res) {
          if (res.code !== 200) {
            notify("mdi mdi-close", res.message, "danger");
            return [];
          }

          return res.data;
        },
        // 查询参数
        queryParams: function () {
          // 查询条件
          return $("[name='form1']").serializeArray(); // 得到条件查询表单中所有的值
        },
        columns: [
          {
            // 列
            field: "example",
            checkbox: true, // 是否显示复选框
          },
          {
            field: "no", // 属性名
            align: "center", // 对齐方式
            title: "序号", // 标题
            formatter: function (value, row, index) {
              return index + 1;
            },
          },
          {
            field: "id",
            title: "编号",
            visible: false,
          },
          {
            field: "chanceSource",
            align: "center",
            title: "机会来源",
          },
          {
            field: "customerName",
            align: "center",
            title: "客户名称",
          },
          {
            field: "cgjl",
            align: "center",
            title: "成功几率",
            formatter: function (value, row, index) {
              return (
                "<span>" +
                row.cgjl +
                "%</span><div class='progress progress-striped progress-sm'>" +
                "<div class='progress-bar progress-bar-danger' style='width: " +
                row.cgjl +
                "%;'></div></div>"
              );
            },
          },
          {
            field: "overview",
            align: "center",
            title: "概要",
          },
          {
            field: "linkageMan",
            align: "center",
            title: "联系人",
          },
          {
            field: "linkagePhone",
            align: "center",
            title: "联系人电话",
          },
          {
            field: "description",
            align: "center",
            title: "描述",
          },
          {
            field: "createMan",
            align: "center",
            title: "创建人",
          },
          {
            field: "assignMan",
            align: "center",
            title: "指派人",
          },
          {
            field: "assignTime",
            align: "center",
            title: "指派时间",
          },
          {
            field: "devResult",
            align: "center",
            title: "开发结果",
            formatter: function (value, row, index) {
              if (row.devResult === 1) {
                return "<span class='text-success'>开发成功<span>";
              } else if (row.devResult === 2) {
                return "<span class='text-info'>开发中<span>";
              } else if (row.devResult === 3) {
                return "<span class='text-warning'>未开发<span>";
              } else if (row.devResult === 4) {
                return "<span class='text-danger'>开发失败<span>";
              } else {
                return "-";
              }
            },
          },
          {
            field: "isValid",
            align: "center",
            title: "是否有效",
            formatter: function (value, row, index) {
              // 格式化
              if (row.isValid === 1) {
                return "<span class='badge badge-success'>有效</sapn>";
              } else if (row.isValid === 0) {
                return "<span class='badge badge-danger'>无效</span>";
              } else {
                return "<span class='badge badge-info'>-</span>";
              }
            },
          },
          {
            field: "createDate",
            align: "center",
            title: "创建时间",
          },
          {
            field: "operate",
            align: "center",
            title: "操作",
            formatter: btnGroup,
            events: {
              // 事件
              "click .dev-btn": function (event, value, row, index) {
                dev(row);
              },
            },
          },
        ],
        onLoadSuccess: function () {
          // 数据加载成功时调用的方法
        },
        onLoadError: function () {
          // 数据加载失败时调用的方法
          setTimeout(function () {
            notify("mdi mdi-close", "数据加载失败!", "danger");
          }, 300);
        },
        onCheck: function () {
          // 复选框单击事件
          getSelections();
        },
      });

      // 销售经理
      $("[name='assignMan']").append("<option value=''>请选择</option>");
      $.get("${ctx}/user/findCustomer", function (data) {
        $(data).each(function (i, o) {
          $("[name='assignMan']").append(
            "<option value='" + o.username + "'>" + o.username + "</option>"
          );
        });
      });
    });

    // 操作按钮
    function btnGroup(value, row, index) {
      if (row.devResult === 1) {
        return '<a href="#" class="btn btn-xs btn-success m-r-5 dev-btn" title="详情" data-toggle="tooltip"><span class="mdi mdi-information"></span>详情</a>';
      } else if (row.devResult === 2) {
        return '<a href="#" class="btn btn-xs btn-info m-r-5 dev-btn" title="查看" data-toggle="tooltip"><span class="mdi mdi-application-export"></span>查看</a>';
      } else if (row.devResult === 3) {
        return '<a href="#" class="btn btn-xs btn-warning m-r-5 dev-btn" title="开发" data-toggle="tooltip"><span class="mdi mdi-application-export"></span>开发</a>';
      } else if (row.devResult === 4) {
        return '<a href="#" class="btn btn-xs btn-danger m-r-5 dev-btn" title="详情" data-toggle="tooltip"><span class="mdi mdi-information"></span>详情</a>';
      } else {
        return "-";
      }
    }

    // 操作按钮 - 开发
    function dev(r) {
      if (r.devResult === 3) {
        notify(
          "mdi mdi-alert-octagon-outline",
          "未指派不能开发，请先指派!",
          "warning"
        );
        setTimeout(function () {
          $("#myModal").modal("show");
          $("[name='id']").val(r.id);
          $("[name='customerName']:eq(1)").val(r.customerName);
          $("[name='chanceSource']:eq(1)").val(r.chanceSource);
          $("[name='createMan']").val(r.createMan);
          $("[name='linkageMan']").val(r.linkageMan);
          $("[name='linkagePhone']").val(r.linkagePhone);
          $("[name='overview' ]").val(r.overview);
          $("[name='cgjl']").val(r.cgjl);
          $("[name='description']").val(r.description);
          $("[name='isValid']").val(r.isValid);
          $("[name='updateDate']").val(getFormatDate());
          $("[name='assignMan']:eq(1)").val(r.assignMan);
          $("#state").val(1);
          $("[name='devResult']:eq(1)").val(2);
          $("[name='assignTime']").val(getFormatDate());
        }, 1e3);
      } else {
        let txt;
        if (r.devResult === 1) {
          txt = "text-success";
        } else if (r.devResult === 2) {
          txt = "text-info";
        } else if (r.devResult === 3) {
          txt = "text-warning";
        } else if (r.devResult === 4) {
          txt = "text-danger";
        }

        let loader = $("body").lyearloading({
          opacity: 0.2,
          spinnerSize: "lg",
          backgroundColor: "gray",
          spinnerText: "页面加载中，请稍后...",
          textColorClass: txt,
          spinnerColorClass: txt,
        });
        setTimeout(function () {
          loader.destroy();
          location.href = "${ctx}/page/dev-plan/info/" + r.id;
        }, 1e3);
      }
    }

    function insert_update() {
      let $assignMan = $("[name='assignMan']:eq(1)");
      if ($assignMan.val() === "") {
        notify("mdi mdi-close", "请选择指派人！", "danger");
        $assignMan.focus();
      } else {
        let obj = $("form:eq(1)").serializeArray();
        $.post("${ctx}/sale-chance/update", obj, function (data) {
          $("#myModal").modal("hide");
          let loader = $("body").lyearloading({
            opacity: 0.2,
            spinnerSize: "lg",
          });
          setTimeout(function () {
            loader.destroy();
            if (data) {
              $("#table").bootstrapTable("refresh");
              notify(
                "mdi mdi-checkbox-marked-circle-outline",
                "指派成功!",
                "success"
              );
            } else {
              notify("mdi mdi-close", "指派失败!请重试...", "danger");
            }
          }, 1e3);
        });
      }
    }
  </script>
</html>
